<!--
    amusement 文件夹下主要存放 “休闲娱乐” 相关的 API
    历史上的今天 API 调用
    内容展示：
        自定义列表组
        https://v4.bootcss.com/docs/components/list-group/#custom-content
-->
<template>
  <div class="container">

    <!--  面包屑导航 -->
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/onlinetool/#/">首页</a></li>
        <li class="breadcrumb-item"><a href="#">休闲娱乐</a></li>
        <li class="breadcrumb-item active" aria-current="page">历史上的今天</li>
      </ol>
    </nav>

    <!--  头部卡片  -->
    <div class="card border-primary">
      <!--  放在 .card 里面的标签默认宽度会占满父元素宽度, 所以 a 标签应该放在 .card-body 里面-->
      <div class="card-header">历史上的今天(此接口速度较慢，请耐心等待！)</div>
      <div class="card-body ">
        <h5 class="card-title text-primary">看看历史上的今天都发生了那些有意思的事情吧~</h5>
        <p class="card-text"></p>
        <!--          <a href="#" class="btn btn-outline-success">获取每日笑话</a>-->
        <button type="button" @click="getData" class="btn btn-outline-success">获取数据</button>

        <div class="spinner-border text-success ml-5" role="status">
          <span class="sr-only">Loading...</span>
        </div>
      </div>
    </div>

    <!--  内容展示: 利用 “列表组”  -->
    <div class="list-group">
      <a href="javascript:;"  v-for="item in datalist" :key="item.id" class="list-group-item list-group-item-action  align-items-start">
        <div class="d-flex w-100 justify-content-between">
          <h5 class="mb-1 text-primary">{{ item.title}}</h5>
<!--          <small>{{ item.year + "年"}}</small>-->
        </div>
        <p class="mb-1">{{ item.desc }}</p>
        <small>{{ item.year + "年"}}</small>
      </a>
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        month: "",
        day: "",
        datalist: [],
        // desc: "弗雷德里克一世（丹麦语：Frederik 1.，1471年10月7日―1533年4月10日）奥尔登堡王朝的丹麦和挪威国王（1523年―1533年在位）。"
        // monthday: "1007"
        // title: "丹麦国王弗雷德里克一世出生"
        // type: "birth"
        // year: 1471
      }
    },
    methods: {
      async getData() {
        this.$(".spinner-border").css("display", "inline-block");

        const result = await this.$http.get('https://v1.alapi.cn/api/eventHitory',{
          params: {
            // monthday: this.month + this.day
          }
        });
        console.log(result);
        this.datalist = result.data.data;

        if (this.datalist.length !== 0) {
          this.$(".spinner-border").css("display", "none");

        }
      }
    }
  }
</script>

<style scoped>

  .spinner-border {
    display: none;
  }

</style>
